<template>
  <div
    class="vaw-main-layout-container"
    :class="[
      state.layoutMode === 'ttb'
        ? 'main-layout__ttb'
        : !state.isCollapse
        ? 'main-layout-open-status'
        : 'main-layout-close-status',
      state.isFixedNavBar ? 'main-layout_fixed-nav-bar' : 'main-layout',
    ]"
  >
    <section :class="[
        state.layoutMode === 'ttb'
          ? 'nav-bar__ttb'
          : !state.isCollapse
          ? 'nav-bar-open-status'
          : 'nav-bar-close-status',
        state.isFixedNavBar ? 'fixed-nav-bar' : '',
        !mShowNavBar ? 'tab-bar-top' : '',
      ]">
      <NavBar v-if="mShowNavBar" />
      <TabBar />
    </section>
    <div class="main-base-style">
      <section class="main-section">
        <Main />
      </section>
      <section class="footer-wrapper">
        <Footer />
      </section>
      <el-backtop target=".main-base-style"> </el-backtop>
    </div>
    <el-backtop target=".vaw-main-layout-container"> </el-backtop>
  </div>
</template>

<script lang="ts">
import NavBar from "./navbar/NavBar.vue";
import TabBar from "./tabbar/index.vue";
import Main from "./Main.vue";
import store from "./store";
import { computed, defineComponent } from "vue";
export default defineComponent({
  name: "MainLayout",
  components: { NavBar, Main, TabBar },
  props: {
    showNavBar: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const state = store.state;
    function onFixedHeader() {
      store.toggleFixedNavBar(!state.isFixedNavBar);
    }
    const mShowNavBar = computed(() => {
      return props.showNavBar;
    });
    const isShowHeader = computed(() => {
      return store.isShowHeader();
    });
    return {
      state,
      mShowNavBar,
      isShowHeader,
      onFixedHeader,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "./styles/variables.scss";
.main-layout__ttb {
  margin-left: 0;
}
.main-layout-open-status {
  margin-left: $menuWidth;
}
.main-layout-close-status {
  margin-left: $minMenuWidth;
}
.nav-bar__ttb {
  width: 100%;
}
.nav-bar-open-status.fixed-nav-bar {
  width: calc(100% - #{$menuWidth});
}
.nav-bar-close-status.fixed-nav-bar {
  width: calc(100% - #{$minMenuWidth});
}

.main-layout {
  padding-top: 0;
  overflow-y: auto;
}
.main-layout_fixed-nav-bar {
  padding-top: $logoHeight + $tabHeight;
  overflow-y: hidden;
  .main-base-style {
    overflow-y: auto;
  }
}

.vaw-main-layout-container {
  height: 100%;
  box-sizing: border-box;
  transition: margin-left $transitionTime;
  .main-base-style {
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
  .main-section {
    min-height: calc(100% - #{$footerHeight} - 6px);
    overflow-x: hidden;
  }
  .fixed-nav-bar {
    position: fixed;
    top: 0;
    transition: width $transitionTime;
    z-index: 96;
  }
  .tab-bar-top {
    padding-top: $logoHeight;
  }
}
.footer-wrapper {
  margin-top: 6px;
}
.is-mobile {
  .main-layout-open-status,
  .main-layout-close-status {
    margin-left: 0;
    transition: none;
  }
  .nav-bar-open-status,
  .nav-bar-close-status {
    width: 100%;
  }
}
</style>
